<template>
    <div class="common-layout">
        <el-container>
            <el-header>
                <span @click="signUp()"><a>注册</a></span>>
                <span @click="signIn()"><a>登录</a></span>
            </el-header>
          <el-main>
          </el-main>
            <el-footer>&copy; 2023 by SongXuan<sup>&reg;</sup></el-footer>
        </el-container>
    </div>
</template>
<script setup>

import router from "../router/index.js";

const signIn = () => {
router.push('/SignIn')
}
</script>
<style scoped>
.common-layout {
    height: 100vh; /* vh: viewport height */
}
.el-header {
    height: 40px;
    background: black;
    color: grey;
}
.el-header span{
    float: right;
    padding-right:20px;
    padding-top: 10px;
}
.el-header span a:hover{
    color: white;
    cursor: pointer;
}

.el-container {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.el-container.is-vertical {
    height: 100%;
}

.el-icon {
    color: orangered;
}

.icon {
    display: inline-block; /* inline-block 行内块级*/
    vertical-align: middle; /* 垂直方向居中对齐*/
}

.title {
    margin-left: 10px;
    font-size: 25px;
    font-weight: bolder;
    line-height: 60px; /* 行高 行高等于父级容器的高度 将在父级容器中垂直居中 */
}

.sign_in_card {
    margin: 80px 100px;
    width: 25%;
    border-radius: 10px;
    opacity: .8
}

.el-footer {
    color: #f9f9f9;
    height: 100px;
    line-height: 100px;
    text-align: center; /* 文本水平居中 */
    background: rgba(33, 33, 33, .8);
}
</style>